<template>
    <div class="homeWrap">
        <mu-container class="demo-container is-stripe">
            <mu-row>
                <mu-col span="12">
                    <img class="banner" src="../../assets/img/banner.png">
                </mu-col>
            </mu-row>
            <mu-row gutter>
                <mu-col v-for="(item,index) in picInfo" :key="index" span="6">
                    <div class="grid-cell" @click="toUrl(item)">
                        <img :src="item.src"/>
                        <p class="des">{{ item.des }}</p>
                    </div>
                </mu-col>
                <!-- <mu-col span="6"><div class="grid-cell">22</div></mu-col>
                <mu-col span="6"><div class="grid-cell">33</div></mu-col>
                <mu-col span="6"><div class="grid-cell">44</div></mu-col> -->
            </mu-row>
        </mu-container>
    </div>
</template>
<script>
import 'utils/baiduMap';
export default {
  name: "home",
  data() {
    return {
      picInfo: [
        {
          src: require("../../assets/img/btn1.png"),
          des: "事故报案",
          name: "prompt"
        },
        {
          src: require("../../assets/img/btn2.png"),
          des: "报案记录",
          name: "userSignIn",
          fromPage: "handle" 
        },
        {
          src: require("../../assets/img/btn3.png"),
          des: "责任认定书查询",
          name: "userSignIn",
          fromPage: "handleType" 
        },
        {
          src: require("../../assets/img/btn4.png"),
          des: "报案流程简介",
          name: "flowPath"
        }
      ],
      test: 0
    };
  },
  components: {},
  created() {
      document.title = '事故快处共享平台';
  },
    watch: {
        test: {
            handler(curVal,oldVal){
                // if (curVal > 5000) {
                //     this.$toast.message({
                //         message: '温馨提示：您当前所处位置距离深圳市会展中心' + this.test + '米，已超出该产品试用范围。',
                //         color: '#F57979'
                //     }); 
                // }           
            },
            deep: true, 
        }
    },
  methods: {
      toUrl(data) {
            if(this.test>5000) {
                // this.$toast.message({
                //     message: '温馨提示：您当前所处位置距离深圳市会展中心' + this.test + '米，已超出该产品试用范围。',
                //     color: '#F57979'
                // }); 
                // return
            };
            if(data.name) {
                const routeObj = {};
                routeObj.name = data.name;
                //判断如果有带页面来源
                if(data.fromPage) {
                    routeObj.query = {
                        fromPage:data.fromPage
                    }
                }
                console.log(routeObj);
                this.$router.push(routeObj);
          }
      },
      geolocation() {
            let that = this;
            let geolocation = new BMap.Geolocation();            
		    let map = new BMap.Map();		
            let myGeo = new BMap.Geocoder();
            geolocation.getCurrentPosition(function(r) {
                if(this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var pt = r.point;
                    // 根据坐标得到地址描述
                    myGeo.getLocation(pt, function(result) {
                        if(result) {
                            let accidentLng = result.point.lng;  //事故纬度
                            let accidentLat = result.point.lat;  //事故经度
    
                            let A = new BMap.Point(accidentLng, accidentLat);
                            let B = new BMap.Point(114.066337, 22.536516); // 深圳市会展中心经纬度
						    // let B = new BMap.Point(121.491065,31.192278); // 上海市会展中心经纬度
                            console.log('测试：' + map.getDistance(A,B).toFixed(0));
                            that.test = map.getDistance(A,B).toFixed(0);                             
                        }
                    });	
                } else {
                    alert('百度地图定位获取定位失败。')
                }
		    });
        }
  },

    mounted() {
        this.geolocation();
    }
};
</script>
<style scoped lang="scss">
    @import "~assets/css/mixin.scss";
    .homeWrap {
        background-color: #f5f6f8;
        height: 100%;
        padding: 0 rem(7);
    }

    .banner {
        width: 100%;
        height: auto;
        margin: rem(15) auto;
    }

    .demo-container {
        .grid-cell {
            border-radius: rem(4);
            height: rem(165);
            background: rgba(255, 255, 255, 0.8);
            margin-bottom: rem(15);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
            @include size(rem(72), rem(72));
            }
            .des {
            font-size: rem(15);
            margin-top: rem(17);
            }
        }
    }
</style>

